<template>
  <div class="dashboard-container" >
    房间管理
    <el-dialog title="新增" :visible.sync="addButtonController" width="30%" @close="closeRoom('ruleForm')">
      <el-form label-width="20%" :model="addList" ref="ruleForm">
        <el-form-item label="房间号" prop="roomNumber">
          <el-input v-model="addList.roomNumber" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入房间号"/>
        </el-form-item>
        <el-form-item label="房间类型" prop="roomTypeId">
          <el-select v-model="addList.roomTypeId" clearable placeholder="房间类型" style="width: 80%" >
            <el-option
              v-for="item in roomsList"
              :key="item.roomTypeId"
              :label="item.roomTypeName + '-' + item.roomPrice"
              :value="item.roomTypeId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="addList.remark" maxlength="100" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="addRoom('ruleForm')">确 定</el-button>
        <el-button plain @click="closeRoom('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="updateButtonController" width="30%"  @close="closeRoom('ruleForm')">
      <el-form label-width="20%" :model="updateList" ref="ruleForm">
        <el-form-item label="房间号" prop="roomNumber">
          <el-input v-model="updateList.roomNumber" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入房间号"/>
        </el-form-item>
        <el-form-item label="房间类型" prop="roomTypeId">
          <el-select v-model="updateList.roomTypeId" clearable placeholder="房间类型" style="width: 80%" >
            <el-option
              v-for="item in roomsList"
              :key="item.roomTypeId"
              :label="item.roomTypeName + '-' + item.roomPrice"
              :value="item.roomTypeId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="updateList.remark" maxlength="100" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="updateRoom('ruleForm')">确 定</el-button>
        <el-button plain @click="closeRoom('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="删除" :visible.sync="deleteButtonController" width="30%" @close="closeDelete('ruleForm')">
      <div style="margin: 10px"><span>请确认是否删除</span></div>
      <span slot="footer" class="dialog-footer">
          <el-button type="info" plain @click="deleteRoom('ruleForm')">确定</el-button>
          <el-button plain @click="closeDelete('ruleForm')">取消</el-button>
      </span>
    </el-dialog>


    <el-button type="primary" plain style="width:80px;margin-bottom:30px;margin-left:10% ;" @click="addButton">新增</el-button>
    <el-input
      v-model="roomNumber"
      placeholder="房间号"
      name="roomNumber"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />
    <el-select
      v-model="roomTypeName"
      clearable placeholder="房间类型"
      style="margin-left: 40px;width: 200px">

      <el-option
        v-for="item in roomsList"
        :key="item.roomTypeId"
        :label="item.roomTypeName + '-' + item.roomPrice"
        :value="item.roomTypeName">
      </el-option>
    </el-select>


    <el-button type="primary" plain style="width:80px;margin-bottom:30px;margin-left:40px ;" @click="selectRoom">查询</el-button>
    <el-button  style="width:80px;margin-bottom:30px;margin-left:40px ;" @click="checkRoom">重置</el-button>

    <el-table :data="roomList.slice((currentPage-1)*pagesize,currentPage*pagesize)" height="650px" border style="width: 100%;margin-top: 20px">
      <el-table-column align="center" fixed prop="roomId" sortable label="房间ID"/>
      <el-table-column align="center" fixed prop="roomNumber" sortable label="房间号"/>
      <el-table-column align="center" fixed prop="roomTypeName" sortable label="房间类型"/>
      <el-table-column align="center" fixed prop="roomPrice" sortable label="房间价格"/>
      <el-table-column align="center" fixed prop="remark" sortable label="备注"/>
      <el-table-column align="center" fixed label="操作">
        <template v-slot="scope">
          <!--  修改、删除 -->
          <el-button class="el-icon-edit" circle @click="updateButton(scope.row)"></el-button>
          <el-button  class="el-icon-delete" circle @click="deleteButton(scope.row)"></el-button>
        </template>

      </el-table-column>
    </el-table>

    <div style="margin-top:20px; text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8,15,20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="roomList.length">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { deleteRoom, insertRoom, selectAllRoom, updateRoom } from '@/api/room'
import { selectAllRoomType, updateRoomType } from '@/api/roomType'

export default {
  name: 'user',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data(){
    return{
      currentPage: 1,
      currentIndex: '',
      pagesize: 8,

      roomNumber:'',
      roomTypeId:'',
      roomTypeName:'',
      roomList: [],
      roomsList: [], // 下拉数据
      addButtonController:false,
      updateButtonController:false,
      deleteButtonController:false,
      deleteRoomId:'',
      deleteRoomTableId:'',
      addList:{
        roomNumber:'',
        roomTypeId: '',
        // roomTypeName:'',
        // roomPrice:'',
        remark:''
      },
      updateList:{
        roomId:'',
        roomTableId: '',
        roomNumber:'',
        roomTypeId: '',
        roomTypeName:'',
        roomPrice:'',
        remark:''
      },

    }
  },





  mounted() {
    this.selectRoom()
    this.fetchRoomTypes();    // 加载下拉选项
  },
  methods:{
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage= val
    },

    fetchRoomTypes() {
      selectAllRoomType().then(response => {
        this.roomsList = Object.values(
          response.data.reduce((acc, item) => {
            acc[item.roomTypeId] = item; // 保留最后一个出现的重复项
            return acc;
          }, {})
        );
      });
    },
    selectRoom(){
      this.currentPage = 1
      selectAllRoom({
        roomNumber:this.roomNumber,
        roomTypeName:this.roomTypeName,
        roomTypeId: this.roomTypeId
      }).then(
        response => {
          console.log(response.data)
          this.roomList = response.data
        }
      )
    },
    addButton(){
      this.addList = {
        roomNumber:'',
        roomTypeId: '',
        // roomTypeName:'',
        // roomPrice:'',
        remark:''
      }
      this.addButtonController = true
    },
    updateButton(row){
      this.updateList = {
        roomId:row.roomId,
        roomTableId: row.roomTableId,
        roomNumber:row.roomNumber,
        roomTypeId:row.roomTypeId,
        remark:row.remark
      }
      this.updateButtonController = true
    },
    deleteButton(row){
      this.deleteRoomId = row.roomId
      this.deleteRoomTableId = row.roomTableId
      this.deleteButtonController = true
    },
    addRoom(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('新增参数:', this.addList);
          insertRoom({
            roomNumber:this.addList.roomNumber,
            roomTypeId:this.addList.roomTypeId,
            // roomTypeName:this.addList.roomTypeName,
            // roomPrice:this.addList.roomPrice,
            remark:this.addList.remark
          }).then(
            response => {
              this.addButtonController = false
              this.$message.success("新增成功！"); // 添加成功提示
              this.selectRoom()
            }
          )
        } else {
          return false
        }
      })
    },
    updateRoom(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateRoom({
            roomId:this.updateList.roomId,
            roomTableId:this.updateList.roomTableId,
            roomNumber:this.updateList.roomNumber,
            roomTypeId:this.updateList.roomTypeId,
            roomTypeName:this.updateList.roomTypeName,
            roomPrice:this.updateList.roomPrice,
            remark:this.updateList.remark
          }).then(
            async response => {
              this.updateButtonController = false
              this.selectRoom()
            })
        } else {
          return false;
        }
      });
    },
    deleteRoom(formName) {
      deleteRoom({
        roomId:this.deleteRoomId,
        roomTableId:this.deleteRoomTableId
      }).then(
        async response => {
          this.deleteButtonController = false
          this.selectRoom()
        })
    },
    closeDelete() {
      this.addButtonController = false
      this.updateButtonController = false
      this.deleteButtonController = false
    },
    checkRoom(){
      this.roomNumber = ''
      this.roomTypeName = ''
      this.roomTypeId = ''
      this.selectRoom()
    },
    closeRoom(formName){
      this.$refs[formName].resetFields();
      this.addButtonController = false;
      this.updateButtonController = false;
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
